<template>
    <div class="hospital">
        <el-button size="small" @click='showDialog'>新增</el-button>

        <!-- 表格 -->
        <el-table
            size='small'
            :data="tableData"
            style="width: 100%">
            <el-table-column
            prop="id"
            label="编号"
            width="80">
            </el-table-column>
            <el-table-column
            prop="name"
            label="医院名称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="introduce"
            label="医院简介">
            </el-table-column>
            <el-table-column
            prop="address"
            label="医院地址">
            </el-table-column>
            <el-table-column
            prop="flags"
            label="医院标记">
            </el-table-column>
            <el-table-column
            label="操作"
            width="100">
                <template v-slot='scope'>
                    <a href="" @click.prevent='toDelete(scope.row)'>删除</a>
                    <a href="" @click.prevent='toEdit(scope.row)'>修改</a>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页按钮 -->
        <el-pagination
            layout="prev, pager, next"
            :current-page='obj.page'
            :page-size='obj.pageSize'
            @current-change='chagePage'
            :total="total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog width="70%" title="录入医院信息" :visible.sync="dialogFormVisible">
            {{form}}
            <el-form :model="form">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth">
                    <el-input type='textarea' v-model="form.introduce" autocomplete="off"></el-input>
                </el-form-item>
                
                <el-form-item label="省市区" :label-width="formLabelWidth">
                    <el-cascader
                        v-model="form.pca"
                        :options="pca"
                        :props="{ value:'name',label:'name', expandTrigger: 'hover' }"></el-cascader>
                </el-form-item>

                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标记" :label-width="formLabelWidth">
                    <el-input v-model="form.flags" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="经度" :label-width="formLabelWidth">
                    <el-input v-model="form.longitude" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="纬度" :label-width="formLabelWidth">
                    <el-input v-model="form.latitude" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHospital">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/http/axios'
import pca from '@/assets/pca.json'
import qs from 'qs'
export default {
    data(){
        return {
            pca,
            obj:{
                page:1,
                pageSize:5
            },
            tableData:[],
            total:0,
            dialogFormVisible:false,
            form:{},
            formLabelWidth:'120px'
        }
    },
    created(){
        this.findAllHospital()
    },
    watch:{
        obj:{
            handler:function(){
                this.findAllHospital()
            },
            deep:true
        }
    },
    methods:{
        // 删除
        toDelete(item){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 如果用户点击了确定按钮时，执行then里面的代码，也就是发送删除的请求
                axios({
                    url:'http://39.96.21.48:8001/hospital/deleteById',
                    method: 'get',
                    params:{
                        id:item.id
                    }
                }).then((res)=>{
                    // 1. 弹出提示框
                    this.$notify({
                        title: '成功',
                        message: res.data.message,
                        type: 'success'
                    });
                    // 2. 刷新数据
                    this.findAllHospital()
                })
            }).catch(() => {
                this.$notify({
                    title: '成功',
                    message: '取消成功',
                    type: 'success'
                });       
            });
        },
        // 修改
        toEdit(data){
            this.dialogFormVisible = true
            // 只要将当前行的数据放入模态框即可
            this.form = JSON.parse(JSON.stringify(data))
            // 将省市区放入一个空数组
            var pca = []
            pca.push(data.province,data.city,data.area)
            this.form.pca = pca
        },
        // 保存医院
        saveHospital(){
            // 1. 封装参数
            this.form.province = this.form.pca[0]
            this.form.city = this.form.pca[1]
            this.form.area = this.form.pca[2]
    
            // 2. 发送请求
            axios({
                url:'http://39.96.21.48:8001/hospital/saveOrUpdate',
                method:'post',
                data:qs.stringify(this.form),
                contentType: 'application/x-www-form-urlencoded'
            }).then((res)=>{
                // 关闭模态框
                this.dialogFormVisible = false
                // 刷新数据
                this.findAllHospital()
                // 提示用户
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
            })
        },
        showDialog(){
            // 1. 显示模态框
            this.dialogFormVisible = true;
            // 2. 清空输入框的内容
            this.form = {}
        },
        // 分页改变事件
        chagePage(page){
            this.obj.page = page;
        },
        // 查询所有的医院
        findAllHospital(){
            axios({
                url:'http://39.96.21.48:8001/hospital/pageQuery',
                method:'get',
                params:this.obj
            }).then((res)=>{
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
        }
    }
}
</script>